<template>
  <div class="order">
    <router-link
      to=""
      class="flexbox order-header"
    >
      <div class="flexbox-item order-header-title">
        <h3>{{order.status.text}}</h3>
        <p
          v-for="text in order.mark"
          :key="text"
        >{{text}}</p>
      </div>
      <div class="flexbox-item order-header-status">
        <img :src="statusImageUrl" />
      </div>
    </router-link>
    <van-cell-group
      class="van-cell-address"
      v-if="address"
    >
      <van-cell
        :title="address.name+' '+address.telephone"
        icon="location"
        :label="address.detail"
      />
    </van-cell-group>
    <div class="order-goods mt10">
      <van-cell
        title="订单号"
        :label="order.order_no"
        icon="orders-o"
        class="order-header-cell"
      >
        <div
          slot="right-icon"
          class="order-header-cell__right-icon"
          v-if="order.can_design"
        >
          <van-button
            size="mini"
            type="warning"
            icon="service-o"
            plain
            round
            @click="linkService"
          >定制客服</van-button>
        </div>
      </van-cell>
      <van-card
        :thumb="product.thumb"
        v-for="product in order.products"
        :key="product.id"
        class="van-hairline-bottom"
      >
        <div
          slot="title"
          class="order-goods__title"
        >
          <span class="van-multi-ellipsis--l2">{{product.name}}</span>
          <price :value="product.amount"></price>
        </div>
        <van-cell-group
          slot="bottom"
          class="order-goods__sku"
          v-if="product.goods.length>0"
          :border="false"
        >
          <van-cell
            :title="sku.sku"
            :value="'x'+sku.num"
            v-for="sku in product.goods"
            :key="sku.id"
            :border="false"
          />
        </van-cell-group>
        <van-panel
          slot="footer"
          title="定制价格"
          icon="flower-o"
          :status="'￥'+order.extras"
          class="order-goods__extras"
          v-if="order.can_design"
        >
          <div class="order-goods__extras-content">优越定制特色定制服务，可以通过跟客服一对一沟通，确定自己的定制方案，定制价格请在与客服沟通后自行修改</div>
          <template #footer>
            <van-button
              size="mini"
              type="warning"
              plain
              round
              @click="onDesign(product.id)"
            >修改</van-button>
          </template>
        </van-panel>
      </van-card>

    </div>

    <van-cell-group class="order-money mt10">
      <van-cell
        title="结算明细"
        icon="balance-o"
      />
      <van-cell
        title="订单金额"
        :value="order.amount"
      />
      <van-cell
        title="运费"
        :value="order.express_price"
      />
      <van-cell
        title="商品总价"
        :value="goodsAmount"
      />
      <van-cell
        title="折扣"
        :value="order.discount"
      />
      <van-cell
        title="定制费用"
        :value="order.extras"
      />
      <van-cell title="实付金额：">
        <price :value="order.pay" />
      </van-cell>
    </van-cell-group>

    <van-cell-group class="van-cell-text-list mt10">
      <van-cell
        title="下单日期"
        :value="order.order_time"
      />
      <van-cell
        title="订单编号"
        :value="order.order_no"
      />
      <van-cell
        title="收货时间"
        value="不限送货时间"
      />
      <van-cell
        title="发票抬头"
        value="个人"
      />
      <van-cell
        title="发票类型"
        value="电子发票"
      />
    </van-cell-group>

    <!-- 支付弹窗 -->
    <payment-dialog
      v-model="showPayment"
      :order-id="order.id"
    />

    <van-submit-bar
      class="van-hairline--top"
      :price="order.pay*100"
      button-text="立即付款"
      label="应付金额："
      button-type="warning"
      @submit="showPaymentControl"
      v-if="order.status.code==0 || order.status.code==10"
    >
      <van-button
        @click="onClickCancel"
        class="btn-cancel"
      >取消订单</van-button>
      <span slot="tip">
        如未在订单过期前付款系统将自动取消订单
      </span>
    </van-submit-bar>

    <van-goods-action
      class="van-action-flex van-hairline--top"
      v-else-if="order.status.code==20"
    >
      <div class="van-action-flex__item">
        <van-button @click="orderService">联系客服</van-button>
      </div>
      <div class="van-action-flex__item">
        <van-button
          type="warning"
          @click="onClickConfirm"
        >
          确认收货
        </van-button>
      </div>
    </van-goods-action>
    <div class="placeholder"></div>
  </div>
</template>
<script>
import {
  Tag,
  Col,
  Icon,
  Cell,
  CellGroup,
  Card,
  Button,
  Panel,
  NoticeBar,
  Dialog,
  SubmitBar,
  GoodsAction
} from 'vant'
import PaymentDialog from '@/components/paymentDialog'
import Price from '@/components/price'
export default {
  components: {
    Price,
    PaymentDialog,
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Panel.name]: Panel,
    [Card.name]: Card,
    [Button.name]: Button,
    [NoticeBar.name]: NoticeBar,
    [Dialog.name]: Dialog,
    [SubmitBar.name]: SubmitBar,
    [GoodsAction.name]: GoodsAction
  },
  data () {
    return {
      showPayment: false,
      order: {
        products: [],
        content: '',
        status: {
          code: -1,
          label: 'status_default',
          text: ''
        }
      }
    }
  },
  created () {
    let id = this.$route.params.id
    console.log(id)
    this.axios
      .get('/shop/order/' + id)
      .then(response => {
        this.order = response.data
      })
      .catch(function (error) {
        console.log(error)
      })
  },

  computed: {
    goodsAmount () {
      var sum = this.order.products.reduce((amount, item) => {
        return amount + item.amount
      }, 0)
      return this.formatPrice(sum)
    },
    address () {
      return this.order.address
    },
    statusImageUrl () {
      return require('../../assets/icons/order/' +
        this.order.status.code +
        '.png')
    }
  },
  methods: {
    submitForm () {
      this.axios
        .get('/site/index')
        .then(response => {
          this.msg = response.data.msg
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    onClickConfirm () {
      this.$dialog
        .confirm({
          message:
            '确认收货前请确认已收到商品，如未收到商品快递请不要进行此操作'
        })
        .then(() => {
          this.axios
            .post('/shop/order/confirm', { id: this.order.id })
            .then(response => {
              this.order = response.data
            })
            .catch(function (error) {
              console.log(error)
            })
        })
        .catch(() => {
          // on cancel
        })
    },
    onClickCancel () {
      this.$dialog
        .confirm({
          message: '您确认要取消当前订单吗？'
        })
        .then(() => {
          this.axios
            .post('/shop/order/cancel', { id: this.order.id })
            .then(response => {
              this.$toast(response.data.msg)
              if (response.data.status) {
                this.$router.push({
                  name: 'order/list/:type',
                  params: {
                    type: 'all'
                  }
                })
              }
            })
        })
        .catch(() => {
          // on cancel
        })
    },
    onDesign (id) {
      this.$toast('微信端定制价格暂未开启')
    },
    linkService () {
      this.$router.push({
        path: '/page/service',
        query: {
          type: 'order',
          id: this.order.id
        }
      })
    },
    orderService () {
      this.$router.push({
        path: '/page/service/postsale',
        query: {
          id: this.order.id
        }
      })
    },
    formatPrice (value) {
      return value.toFixed(2)
    },
    showPaymentControl () {
      let id = this.order.id
      console.log('调用原生支付弹框，支付订单ID：' + id)
      this.showPayment = true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.order-header {
  height: 110px;
  background: #f37d0f;
  &-title {
    -webkit-box-flex: 2;
    -ms-flex: 2;
    flex: 2;
    text-align: left;
    padding-left: 40px;
    color: #fff;
    h3 {
      opacity: 0.98;
      margin: 0;
      padding-bottom: 5px;
      font-weight: 300;
      font-size: 14px;
    }
    p {
      opacity: 0.7;
      margin: 2px 0 0;
      font-weight: 300;
      font-size: 12px;
    }
  }
  &-status {
    padding-right: 10px;
    img {
      width: 100%;
      height: auto;
    }
  }
  &-cell {
    &__right-icon {
      display: flex;
      align-items: center;
      font-size: 12px;
    }
    /deep/ .van-cell__title {
      display: flex;
      align-items: center;
    }
    /deep/ .van-cell__label {
      font-size: 12px;
      margin: 0 0 0 5px;
    }
  }
}

.order-goods {
  background: red;
  &__title {
    display: flex;
    justify-content: space-between;
    span {
      line-height: 20px;
      max-height: 40px;
      padding-right: 8px;
    }
  }
  &__sku {
    margin-top: 10px;
    /deep/ .van-cell {
      padding: 0;
      font-size: 12px;
      &__title {
        span {
          font-size: 80%;
          color: #aaa;
          font-weight: 300;
        }
      }
    }
  }
  /deep/ .van-card {
    margin: 0;
    background: #fff;
    &__title {
      font-size: 14px;
      line-height: 20px;
      max-height: 40px;
    }
    &__desc {
      padding: 5px 0;
      color: #999;
      max-height: 40px;
      line-height: 15px;
    }
    &__footer {
      text-align: left;
    }
  }
  &__extras {
    &-content {
      color: #aaa;
    }
    .van-panel__header {
      padding-left: 0;
      padding-right: 0;
      .van-cell__left-icon {
        color: #ff6600;
      }
    }
    .van-panel__header-value {
      color: blue;
    }
    .van-panel__footer {
      text-align: right;
      padding: 0;
    }
  }
}

.order-money {
  /deep/ .van-cell {
    &:not(:last-child):not(:first-child) {
      font-size: 12px;
      padding: 6px 15px;
      color: #555;
    }
    &:last-child {
      background: #fafafa;
    }
  }
}

.van-action-flex {
  background: #f5f5f5;
}

/deep/ .van-submit-bar {
  background: #f5f5f5;
  .order-amount {
    text-align: left;
    font-size: 16px;
  }
  &__bar {
    padding-right: 10px;
  }
  .btn-cancel {
    border: none;
    font-size: 12px;
    color: #aaa;
    width: auto;
    background: transparent;
    &::before {
      display: none;
    }
  }
  button {
    border-radius: 3px;
    height: 34px;
    line-height: 32px;
    font-size: 14px;
  }
  & ~ .placeholder {
    height: 100px;
  }
}
</style>
